<template>
    <div class="dataScreen">
        <div class="header">陕煤能源数据大屏</div>
        <div class="content">
            <div class="left">
                <div class="module">
                    <h2 class="title">电量指标</h2>
                    <div class="dl_cont">
                        <img src="@/assets/images/dataScreen/battery.png" alt="" class="pic" />
                        <div class="numerical">
                            <p class="name color-9BC3FD">总充电量/WMh</p>
                            <p class="value blue m-b-20">633.03</p>
                            <p class="name color-FED99B">总放电量/WMh</p>
                            <p class="value orange">321.03</p>
                        </div>
                    </div>
                </div>
                <div class="module">
                    <h2 class="title">日充放电量</h2>
                    <div class="dc_cont">
                        <ECharts :option="barChartOptions" />
                    </div>
                </div>
                <div class="module">
                    <h2 class="title">社会效益</h2>
                    <div class="sh_cont">
                        <div class="items">
                            <div class="item">
                                <p class="name">节约标准煤（吨）</p>
                                <p class="value">155.26</p>
                            </div>
                            <div class="item">
                                <p class="name">CO₂ 减排总量（吨）</p>
                                <p class="value">317.62</p>
                            </div>
                            <div class="item">
                                <p class="name">种树（万辆）</p>
                                <p class="value">1.74</p>
                            </div>
                        </div>
                        <img src="@/assets/images/dataScreen/benefit_pic.png" alt="" class="pic" />
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="items">
                    <div class="item">
                        <p class="name">建设规模（MWh）</p>
                        <p class="value">4.36</p>
                    </div>
                    <div class="item">
                        <p class="name">PCS (台)</p>
                        <p class="value">10</p>
                    </div>
                    <div class="item">
                        <p class="name">装机功率（MW）</p>
                        <p class="value">2.3</p>
                    </div>
                    <div class="item">
                        <p class="name">电池舱（个）</p>
                        <p class="value">30</p>
                    </div>
                    <div class="item">
                        <p class="name">总SOC (%)</p>
                        <p class="value">98.7</p>
                    </div>
                    <div class="item">
                        <p class="name">电池（节）</p>
                        <p class="value">3009</p>
                    </div>
                </div>
                <div class="chinaMap" id="chinaMap">
                </div>
            </div>
            <div class="right">
                <div class="module">
                    <h2 class="title">收益目标</h2>
                    <div class="sy_cont">
                        <div class="item">
                            <img src="@/assets/images/dataScreen/pic1.png" alt="" />
                            <p class="name">昨日收益（元）</p>
                            <p class="value">5293.48</p>
                        </div>
                        <div class="item">
                            <img src="@/assets/images/dataScreen/pic2.png" alt="" />
                            <p class="name">累计收益（万元）</p>
                            <p class="value">42.93</p>
                        </div>
                    </div>
                </div>
                <div class="module">
                    <h2 class="title">运行状态</h2>
                    <div class="yx_cont">
                        <ECharts :option="lineChartOptions" />
                    </div>
                </div>
                <div class="module">
                    <h2 class="title">电站状态</h2>
                    <div class="dz_cont">
                        <div class="top">
                            <div class="radioBox">
                                <div class="radio">
                                    <p class="name">SOC</p>
                                    <p class="value">99.56</p>
                                </div>
                            </div>
                            <div class="topItems">
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon1.svg" alt="" />
                                    <p class="name">单柜系统告警</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon2.svg" alt="" />
                                    <p class="name">单柜系统故障</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon2.svg" alt="" />
                                    <p class="name">单柜 PCS 告警</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon2.svg" alt="" />
                                    <p class="name">单柜 PCS 故障</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon2.svg" alt="" />
                                    <p class="name">单柜 BMS 告警</p>
                                </div>
                                <div class="item">
                                    <img src="@/assets/images/dataScreen/icon2.svg" alt="" />
                                    <p class="name">单柜 BMS 故障</p>
                                </div>
                            </div>
                        </div>
                        <div class="botItems">
                            <div class="item">
                                <p class="value">93.95</p>
                                <p class="name">全站剩余<br>可用容量</p>
                            </div>
                            <div class="item">
                                <p class="value">0</p>
                                <p class="name">全站最大<br>SOC 误差</p>
                            </div>
                            <div class="item">
                                <p class="value">0.79</p>
                                <p class="name">全站单体<br>平均电阻</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import ECharts from '@/components/ECharts.vue';
import router from '@/router';

const showBackButton = ref(true);
const myChart = ref(null);
const mapList = ref([]);

const barChartOptions = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['充电量', '放电量'],
        textStyle: {
            color: '#fff'
        },
        right: '0',
        top: '4%',
        itemWidth: 14,
        itemHeight: 14
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '20%',
        containLabel: true // 防止标签溢出
    },
    xAxis: {
        type: 'category',
        data: ['08-02', '08-03', '08-04', '08-05', '08-06'],
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        },
    },
    yAxis: {
        type: 'value',
        name: 'WMh',
        nameTextStyle: {
            color: '#fff'
        },
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            lineStyle: {
                color: '#4D5969'
            }
        }
    },
    series: [{
        name: '充电量',
        type: 'bar',
        data: [1, 5, 2, 3.3, 3.9],
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#0094FF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#0057D1' // 100% 处的颜色
                }]
            },
            borderRadius: [2, 2, 0, 0] // 左上和右上圆角
        }
    }, {
        name: '放电量',
        type: 'bar',
        data: [2, 3.2, 1.9, 3.3, 3.7],
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#FF9900' // 0% 处的颜色
                }, {
                    offset: 1, color: '#D93400' // 100% 处的颜色
                }]
            },
            borderRadius: [2, 2, 0, 0] // 左上和右上圆角
        }
    }]
};

const lineChartOptions = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['充电功率', '放电功率'],
        textStyle: {
            color: '#fff'
        },
        right: '0',
        top: '4%',
        itemWidth: 14,
        itemHeight: 14
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '20%',
        containLabel: true // 防止标签溢出
    },
    xAxis: {
        type: 'category',
        data: ['08-02', '08-03', '08-04', '08-05', '08-06'],
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        },
    },
    yAxis: {
        type: 'value',
        name: 'MW',
        nameTextStyle: {
            color: '#fff'
        },
        axisLabel: {
            color: '#fff'
        },
        splitLine: {
            lineStyle: {
                color: '#4D5969'
            }
        }
    },
    series: [{
        name: '充电功率',
        type: 'line',
        data: [1, 5, 2, 3.3, 3.9],
        itemStyle: {
            color: '#0094FF'
        }
    }, {
        name: '放电功率',
        type: 'line',
        data: [2, 3.2, 1.9, 3.3, 3.7],
        itemStyle: {
            color: '#FF9900'
        }
    }]
};

const getJSON = async ({ name, id }, callback) => {
    console.log(name, id);
    //@/utils/china.json
    //id如果是4位数，补充2个0
    id = id.toString().length === 4 ? id * 100 : id;
    const url = `/map/${id}.json`;
    // const url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full`;
    console.log(url);
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        callback(data);
        setBackbtn({ name, id });
    } catch (error) {
        alert('无此区域地图显示，请查看其他区域！');
    }
};

const setBackbtn = ({ name, id }) => {
    mapList.value.push({ name, id });
    showBackButton.value = name !== 'china';
    console.log(JSON.stringify(mapList.value));
};

const goBack = () => {
    if (mapList.value.length >= 2) {
        const { name, id } = mapList.value[mapList.value.length - 2];
        mapList.value.splice(-2, 2);
        getJSON({ name, id }, (data) => {
            renderChart(name, data);
        });
    }
};


const initChinaMap = () => {
    mapList.value = [];
    getJSON({ name: 'china', id: 100000 }, (data) => {
        renderChart('china', data);
    });
};

const renderChart = (name, data) => {
    echarts.registerMap(name, data);
    const mapdata = data.features.map((item) => {
        return item.properties;
    });
    // 配置option
    setOption(name, mapdata);
};

const setOption = (name, data) => {
    const option = {
        tooltip: {
            show: true,
            formatter: function (params) {

                if (params && params.data) {
                    const { id, name } = params.data;
                    // 返回自定义的tooltip内容
                    return `${name}`;
                }
            },
        },
        series: [{
            name: 'MAP',
            type: 'map',
            mapType: name,
            zoom: 1.2,
            selectedMode: 'false',//是否允许选中多个区域
            layoutCenter: ["50%", "50%"],
            label: {
                normal: {
                    show: true,
                    color: '#fff'
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    areaColor: {
                        image: 'https://hzkj-cloud.skiffenergy.com/img/eg-home-tex-map.4719882d.jpg',
                    },
                    borderColor: '#4bf3f9', // 边界颜色
                    borderWidth: 2,         // 边界宽度
                    shadowColor: '#003373', // 阴影颜色
                    shadowBlur: 10,
                    shadowOffsetX: 0, //阴影偏移量
                    shadowOffsetY: 20, //阴影偏移量

                },
                emphasis: {
                    areaColor: 'none',   // 鼠标悬浮区域的颜色
                }
            },
            data: data,

            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                label: {
                    show: false,
                    formatter: '{b}', // 标签内容
                    color: '#fff'
                },
                itemStyle: {
                    color: '#FF9900'
                },
                data: [
                    {
                        name: '发电站1',
                        coord: [87.6, 43.8],
                        id: 6501
                    },
                    {
                        name: '发电站2',
                        coord: [112.6, 37.8],
                        id: 1401
                    }
                ]
            }
        }]
    };
    myChart.value.setOption(option);
};
onMounted(() => {
    myChart.value = echarts.init(document.getElementById('chinaMap'));
    myChart.value.on('click', (params) => {
        console.log(params);
        if(params.componentType === 'markPoint'){
            router.push({ path: '/monitor/singleStationMonitoring/index', query: { id: params.data.id } });
            return;
        }
        if (params.data) {
            const { id, name, level } = params.data;
            if (level === 'district') {
                alert('无此区域地图显示！');
                initChinaMap();
                return;
            }
            getJSON({ name, id }, (data) => {
                renderChart(name, data);
            });
        }
    });
    initChinaMap();
});
</script>
<style lang="scss" scoped>
.dataScreen {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/dataScreen/index_bg.png') no-repeat;
    background-size: 100% 100%;

    .header {
        width: 100%;
        height: 0.7rem;
        line-height: 0.7rem;
        text-align: center;
        font-size: 0.32rem;
        font-weight: bold;
        color: #fff;
    }

    .content {
        display: flex;
        justify-content: space-between;
        padding: 0 0.36rem;
        height: calc(100% - 1rem);
        overflow: hidden;

        .left,
        .right {
            width: 4.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .module {
                width: 100%;
                height: 2.5rem;
                background: url('@/assets/images/dataScreen/module_bg.png') no-repeat;
                background-size: 100% 100%;

                .title {
                    font-size: 0.18rem;
                    font-weight: 700;
                    color: #fff;
                    margin: 0 0.24rem 0 0.27rem;
                    padding-top: 0.17rem;
                    padding-bottom: 0.11rem;
                    border-bottom: 1px solid #024095;
                    position: relative;
                }

                .title::after {
                    content: '';
                    display: block;
                    height: 4px;
                    background: #00B2FF;
                    width: 0.82rem;
                    box-shadow: 0px 0px 4px 0px #046AF9;
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                }

                .dl_cont {
                    padding-left: 0.11rem;
                    display: flex;
                    height: 1.9rem;

                    .pic {
                        height: 100%;
                    }

                    .numerical {
                        margin-top: 0.25rem;

                        .name {
                            font-size: 0.14rem;
                            color: #fff;
                            line-height: 0.22rem;
                        }

                        .value {
                            font-size: 0.32rem;
                            line-height: 0.4rem;
                            font-weight: bold;

                            &.blue {
                                background: linear-gradient(180deg, #34A7FF 22.5%, #006BFF 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            &.orange {
                                background: linear-gradient(180deg, #FFA901 12.5%, #FF4400 112.5%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }
                        }

                        .color-9BC3FD {
                            color: #9BC3FD;
                        }

                        .color-FED99B {
                            color: #FED99B;
                        }

                        .m-b-20 {
                            margin-bottom: 0.2rem;
                        }
                    }
                }

                .dc_cont {
                    height: 1.9rem;
                    padding: 0 0.24rem;
                }

                .sh_cont {
                    padding: 0 0.2rem;

                    .items {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 0.15rem;

                        .item {
                            text-align: center;
                            flex: 1;

                            .name {
                                font-size: 0.12rem;
                                line-height: 0.16rem;
                                color: #fff;
                                margin-bottom: 0.04rem;
                            }

                            .value {
                                font-size: 0.26rem;
                                line-height: 0.32rem;
                                color: #fff;
                                font-weight: 500;
                            }
                        }
                    }

                    .pic {
                        display: block;
                        margin: 0 auto 0;
                    }
                }

                .sy_cont {
                    display: flex;
                    padding: 0.1rem 0.36rem;

                    .item {
                        text-align: center;
                        flex: 1;

                        img {
                            display: block;
                            margin: 0.04rem auto;
                        }

                        .name {
                            font-size: 0.14rem;
                            line-height: 0.22rem;
                            color: #9BC3FD;
                        }

                        .value {
                            font-size: 0.32rem;
                            line-height: 0.4rem;
                            color: #fff;
                            font-weight: 700;
                        }
                    }
                }

                .yx_cont {
                    height: 1.9rem;
                    padding: 0 0.24rem;
                }

                .dz_cont {
                    padding: 0 0.26rem;

                    .top {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 0.1rem;
                        border-bottom: 1px dashed #024095;
                        padding-bottom: 0.06rem;

                        .radioBox {
                            width: 0.92rem;
                            height: 0.92rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 50%;
                            background: rgba(252, 121, 48, 0.25);
                            margin-right: 0.08rem;

                            .radio {
                                width: 0.86rem;
                                height: 0.86rem;
                                border-radius: 50%;
                                text-align: center;
                                background: radial-gradient(70.93% 70.93% at 50% 50%, #F57F01 46.67%, #FFA800 100%);
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                font-size: 0.16rem;
                                line-height: 0.2rem;
                                font-weight: 700;
                                color: #fff;

                                .name {
                                    margin-bottom: 0.04rem;
                                }
                            }

                        }

                        .topItems {
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            flex: 1;

                            .item {
                                width: 1.16rem;
                                display: flex;
                                background: linear-gradient(90deg, #17355D 0%, #234C84 100%);
                                margin-bottom: 0.04rem;
                                align-items: center;

                                img {
                                    display: block;
                                    width: 0.2rem;
                                    margin-right: 0.06rem;
                                    margin-left: 0.04rem;
                                }

                                .name {
                                    font-size: 0.12rem;
                                    color: #fff;
                                }
                            }
                        }
                    }

                    .botItems {
                        display: flex;
                        justify-content: space-between;

                        .item {
                            text-align: center;
                            width: 1.12rem;
                            height: 0.68rem;
                            border: 1px solid #04BEF933;
                            margin-top: 0.04rem;
                            box-shadow: 0px 0px 50px 0px rgba(4, 106, 249, 0.25) inset;

                            .name {
                                font-size: 0.12rem;
                                line-height: 0.16rem;
                                color: #FFFFFFCC;
                                font-weight: 500;
                            }

                            .value {
                                font-size: 0.18rem;
                                line-height: 0.2rem;
                                color: #fff;
                                font-weight: 700;
                                margin-top: 0.08rem;
                                margin-bottom: 0.02rem;
                            }
                        }
                    }
                }
            }
        }

        .center {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;

            .items {
                display: flex;
                justify-content: space-between;

                .item {
                    text-align: center;
                    width: 1.75rem;
                    height: 1.43rem;
                    background: url('@/assets/images/dataScreen/data_bg.png') no-repeat;
                    background-size: 100% 100%;

                    .name {
                        font-size: 0.12rem;
                        line-height: 0.18rem;
                        color: #fff;
                        margin-bottom: 0.02rem;
                        margin-top: 0.34rem;
                    }

                    .value {
                        font-size: 0.26rem;
                        line-height: 0.36rem;
                        color: #fff;
                        font-weight: 900;
                    }
                }

                .item:nth-child(2),
                .item:nth-child(5) {
                    margin-top: 0.34rem;
                }

                .item:nth-child(3),
                .item:nth-child(4) {
                    margin-top: 0.53rem;
                }
            }

            .chinaMap {
                margin-top: 0.2rem;
                width: 100%;
                height: 100%;
                flex: 1;
            }
        }
    }
}
</style>